<template>
  <div class="Home">
    <!-- 头部 -->
    <div class="homeHeader">
      <i class="iconfont icon-wode"  @click="flag=true"></i>
      <h2>首页</h2>
    </div>

 <!-- 蒙版 -->
    <transition name="hg">
        <div class="msk" v-if="flag" @click="flag=false">
       
        <div class="content"  @click.stop="flag=true"> 
          <h2>个人信息</h2>
          <div class="username">
            <i class="iconfont icon-wodedangxuan"></i>
            <span>Bob</span>
         </div>
          <div class="money" >
            <i class="iconfont icon-meiyuan"></i>
            <span>15.00</span>
          </div>
          <div class="tel" >
            <i class="iconfont icon-dianhua"></i>
            <span>13526146642</span>
          </div>
          <div class="emil" >
            <i class="iconfont icon-youjian"></i>
            <span>Bob@feicui.net</span>
          </div>
        </div>
    </div>
    </transition>
  </div>
</template>

<script>

// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {

  },
  data(){
    return {
      flag:false
    }
  },
  methods:{
    changeMsk(){
      this.flag=true
    },
  }
  }
</script>
<style lang="less">
.hg-enter,
.hg-leave-to{
  transform: translateX(-100%);
}

.hg-enter-active,
.hg-leave-active{
  transition: all 0.5s linear;
}
.Home{
  .homeHeader{
    width:100%;
    height: 4.4rem;
    line-height: 4.4rem;
    i{
      float: left;
      font-size:3rem;
    }
    h2{
      text-align: center;
      font-size:2rem;
    }
  }
  .msk{
    width: 100%;
    height: 100%;
    background: #666;
    position: absolute;
    top:0;
    left:0;
    z-index: 999;
    .content{
        width: 80%;
        height: 100%;
        background: #fff;
        h2{
          height: 4.4rem;
          line-height: 4.4rem;
          text-align: center;
          margin-bottom: 10rem;
          border-bottom: 1px solid #666;
        }
        div{
            width:100%;
            width:calc(100% - 1rem);
            height: 5rem;
            line-height: 5rem;
            font-size: 1.6rem;
            border-top:1px solid #ccc;
            padding-left: 1rem;
            i{
              margin: 0 1rem;
              font-size:3rem;
            }
        }
        .emil{
            border-bottom:1px solid #ccc;
        }
    }
  }
}
</style>

